import { useState } from 'react'
import classNames from 'classnames'
import {
  NavBar,
  Button,
  Input,
  DatePicker
} from 'antd-mobile'

import BillIcon from '@/components/Icon/'
import { billListData } from '@/contants/'
import './index.scss'

const New = () => {
  /* 控制记账类型状态 */
  const [billType, setBillType] = useState('pay')

  /* render */
  return (
    <div className="keepAccounts">
      <NavBar className="nav">
        记一笔
      </NavBar>

      <div className="header">
        <div className="kaType">
          <Button
            shape="rounded"
            className={classNames(billType === 'pay' ? 'selected' : '')}
            onClick={() => setBillType('pay')}
          >
            支出
          </Button>
          <Button
            shape="rounded"
            className={classNames(billType === 'income' ? 'selected' : '')}
            onClick={() => setBillType('income')}
          >
            收入
          </Button>
        </div>

        <div className="kaFormWrapper">
          <div className="kaForm">
            <div className="date">
              <BillIcon type="calendar" className="icon" />
              <span className="text">{'今天'}</span>
              {/* 时间选择器 */}
              <DatePicker
                className="kaDate"
                title="记账日期"
                max={new Date()}
                visible={false}
              />
            </div>
            <div className="kaInput">
              <Input
                className="input"
                placeholder="0.00"
                type="number"
                value={0}
              />
              <span className="iconYuan">¥</span>
            </div>
          </div>
        </div>
      </div>

      <div className="kaTypeList">
        {/* 数据区域 */}
        {
          billListData[`${ billType }`].map(billItem => (
            <div
              className="kaType"
              key={billItem.type}
            >
              <div className="title">{ billItem.name }</div>
              <div className="list">
                {
                  billItem.list.map(item => (
                    <div
                      key={item.type}
                      className={classNames('item')}
                    >
                      <div className="icon">
                        <BillIcon type={ item.type } />
                      </div>
                      <div className="text">{ item.name }</div>
                    </div>
                  ))
                }
              </div>
            </div>
          ))
        }
      </div>

      <div className="btns">
        <Button className="btn save">
          保 存
        </Button>
      </div>
    </div>
  )
}

export default New
